/*
 * Copyright 2020 The Kubernetes Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import 'mixins';
@import 'colors';
@import './Grid/mixins';
@import '../common/narrow-window';
@import '../common/stippling';

@mixin GrayBadge {
  color: $color-fg--bar-gray;
  background: $color-bg--bar-gray;
}
@mixin RedBadge {
  --color1: var(--color-light-red);
  --color2: var(--color-red);
  --color3: transparent;
  @include kui--crosshatch;
}
@mixin GreenBadge {
  color: $color-fg--bar-green;
  background-color: $color-bg--bar-green;
}
@mixin BlueBadge {
  color: $color-fg--bar-blue;
  background-color: $color-bg--bar-blue;
}
@mixin YellowBadge {
  color: $color-fg--bar-yellow;
  background: $color-bg--bar-yellow;
}

.kui--grid-cell:hover {
  filter: $grid-cell-hover-filter;
  cursor: pointer;
  opacity: 1;
}

.kui--table-like-wrapper {
  [data-tag='badge'] {
    display: flex;
    align-items: center;
  }
  @include BadgeColoredPart {
    margin-right: 1ex;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 1px;
    [data-color-by='status'] {
      background-color: var(--color-ui-05);
    }

    &.green-background {
      @include GreenBadge;
    }
    &.blue-background {
      @include BlueBadge;
    }
    &.yellow-background {
      @include YellowBadge;
    }
    button.yellow-background {
      @include YellowBadge;
    }
    &.red-background {
      @include RedBadge;
    }
    &,
    &.gray-background,
    &.kui--status-unknown {
      @include GrayBadge;
    }
  }
}

.repl {
  .kui--data-table-as-grid {
    .kui--card-header {
      border-bottom: 1px solid var(--color-base03);
    }
    .kui--card-body {
    }

    .kui--table-like-wrapper {
      display: grid;
      grid-column-gap: 3px;
      grid-row-gap: 3px;

      [data-tag='badge'] [data-tag='badge-circle'] {
        display: flex;
        margin: 0;
        width: $grid-cell-size;
        height: $grid-cell-size;

        transition-property: filter;
        transition-timing-function: var(--transition-timing-function);
        transition-duration: var(--transition-duration);
      }

      .kui--grid-cell-label {
        flex: 1;
        opacity: 0;
        display: flex;
        font-size: 0.6875em;
        align-items: center;
        justify-content: center;
        transition-property: opacity, mix-blend-mode;
      }

      &:hover {
        .kui--grid-cell-label {
          opacity: 0.9;
        }

        [data-tag='badge'] [data-tag='badge-circle'] {
          &:hover {
            .kui--grid-cell-label {
              mix-blend-mode: hard-light;
            }
          }
        }
      }
    }
  }
}

@mixin badge-only {
  .kui--data-table-container .kui--table-like-wrapper,
  .kui--table-like {
    [data-tag='badge'] {
      padding-left: 1.125em;

      [data-tag='badge-circle'] {
        margin: 0;
        width: 1em;
        height: 1em;
        border-radius: 0;
      }

      .kui--cell-inner-text {
        /* show only the badge-circle when the sidecar is open */
        display: none;
      }
    }
  }
}

/* fine-tune the STATUS/badge presentation of tables when the sidecar is open, or with narrower windows */
@include narrow-window {
  @include badge-only;

  .kui--hide-in-narrower-windows {
    display: none !important;
  }
}

[data-table-watching='true'] .kui--table-like-wrapper {
  [data-tag='badge-circle'] {
    &.yellow-background {
      /* if it's yellow, but we're not sure if it was just updated, blink around 20 times */
      animation: var(--animation-long-repeating-pulse);

      &[data-just-updated] {
        /* if we know the resource was just updated, blink until we get new information */
        animation: var(--animation-infinite-repeating-pulse);
      }
    }

    &.red-background {
      /* if it's red, then blink around 3 times */
      animation: var(--animation-short-repeating-pulse);
    }
  }
}
